<template>
  <div class="app-container calendar-list-container" style="padding-bottom: 0">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('buWorks.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" label-width="120px" style="padding: 10px 20px 0">
        <el-row style="padding-bottom: 10px">

          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('buWorks.country')}}</div>
              <dict-select v-model="listQuery.country" code="country" :clearable="true" @change="setBg"></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Category</div>
              <el-select clearable multiple collapse-tags v-model="listQuery.bg" @change="changeBg" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in bgList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>

          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Account</div>
              <el-select clearable multiple collapse-tags class="yt-multiple" v-model="listQuery.bu" @change="changeBu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in buList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('buWorks.year')}}</div>
              <dict-select
                v-model="listQuery.year"
                code="year"
                clearable
              ></dict-select>
            </div>
          </el-col>
          <el-col :span="6" style="margin-top: 32px">
            <el-button class="yt-btn-ys" type="primary" @click="getData">{{$t('button.search')}}</el-button>
            <el-button class="yt-btn" type="primary"  @click="reset">{{$t('button.reset')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list" style="margin-left:-20px;margin-right:-20px;padding-bottom: 0;position: relative;">
      <div class="list-content" style="border: none;padding-left: 30px;height:49px;line-height: 49px"><span style="line-height: 46px">{{$t('buWorks.buWorksList')}}</span></div>
      <el-button class="yt-btn-ys" type="primary" style="position: absolute;top:7px;right: 20px"  @click="exportExcel">{{$t('button.export')}}</el-button>
    </div>
    <div class="data-list" v-loading="loading" :element-loading-text="$t('buWorks.loading')" element-loading-spinner="el-icon-loading">
      <div class="list-content" style="color: #212121">
        <span style="border: none">{{listQuery.year}} {{$t('buWorks.reviewTable')}}</span>
      </div>
      <el-table :data="totalList" :empty-text="$t('placeholder.emptyText')" class="yt-table" style="width: 100%;margin-top: 24px">
        <el-table-column type="index" align="center" :label="$t('buWorks.index')" width="60"/>
        <el-table-column align="center" :label="$t('buWorks.buSum')" prop="bu" min-width="130"/>
        <el-table-column align="center" :label="$t('buWorks.standardIncome')" prop="standardIncome" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.standardIncome}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.standardCost')" prop="standardCost" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{scope.row.standardCost }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.standardGrossProfit')" prop="standardGrossProfit" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.standardGrossProfit }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.projectHumanCost')" prop="projectHumanCost" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.projectHumanCost }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.adminsCost')" prop="adminsCost" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.adminsCost }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.projectOperatingHumanCost')" prop="projectOperatingHumanCost" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.projectOperatingHumanCost }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.managCostAmort')" prop="managCostAmort" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.managCostAmort }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.hqAmort')" prop="hqAmort" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.hqAmort }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.businessExpenses')" prop="businessExpenses" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.businessExpenses }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.depreciationAmortization')" prop="depreciationAmortization" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.depreciationAmortization }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.abilityProjectCost')" prop="abilityProjectCost" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.abilityProjectCost }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.operatingMargin')" prop="operatingMargin" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.operatingMargin }}</div>
          </template>
        </el-table-column>
      </el-table>

      <el-table v-for="col in list"  :key="col[0].label" :data="col"  class="yt-table" style="width: 100%;margin-top: 24px">
        <el-table-column type="index" align="center" :label="$t('buWorks.index')" width="60"/>
        <el-table-column align="center" :label="col[0].label" prop="bu" min-width="130"/>
        <el-table-column align="center" :label="$t('buWorks.standardIncome')" prop="standardIncome" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.standardIncome}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.standardCost')" prop="standardCost" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{scope.row.standardCost }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.standardGrossProfit')" prop="standardGrossProfit" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.standardGrossProfit }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.projectHumanCost')" prop="projectHumanCost" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.projectHumanCost }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.adminsCost')" prop="adminsCost" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.adminsCost }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.projectOperatingHumanCost')" prop="projectOperatingHumanCost" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.projectOperatingHumanCost }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.managCostAmort')" prop="managCostAmort" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.managCostAmort }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.hqAmort')" prop="hqAmort" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.hqAmort }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.businessExpenses')" prop="businessExpenses" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.businessExpenses }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.depreciationAmortization')" prop="depreciationAmortization" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.depreciationAmortization }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.abilityProjectCost')" prop="abilityProjectCost" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.abilityProjectCost }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.operatingMargin')" prop="operatingMargin" min-width="100">
          <template slot-scope="scope">
            <div v-format="scope.row.bu === '執行率' || scope.row.bu === '實際%' || scope.row.bu === '達成率(預計)' ? '0%' : '#,##0'">{{ scope.row.operatingMargin }}</div>
          </template>
        </el-table-column>
      </el-table>

      <el-table :data="totalAmount" :empty-text="$t('placeholder.emptyText')" class="yt-table" style="width: 100%;margin-top: 24px">
        <el-table-column align="center" :label=listQuery.year prop="year" min-width="100"/>
        <el-table-column align="center" :label="$t('buWorks.financialIdentifyIncome')" prop="financialIdentifyIncome" min-width="100">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{ scope.row.financialIdentifyIncome }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buWorks.financialIdentifyCost')" prop="financialIdentifyCost" min-width="100">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{ scope.row.financialIdentifyCost }}</div>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <!--<div class="pagination-container" style="background: #fff;padding: 8px 30px;margin:24px -20px 0 -20px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page.sync="listQuery.page" :page-sizes="[10, 20, 30, 50, 100, 200]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>-->
  </div>
</template>

<script>
  import { getDeptByBuAndCountry } from '@/api/bu/index';
  import { getByHq } from '@/api/worksTarget/index';
  import { buWorkcheck } from '@/api/pmoReport/buInspection';
  import dictSelect from '@/components/Dict/dictValueSelect';
  export default {
    data() {
      return {
        listQuery: {
          page: 1,
          limit: 10,
          year: '',
          bu: [],
          country: '',
          bg: []
        },
        bgList: [],
        buList: [],
        proportionList: [],
        total: 0,
        list: [],
        totalList: [], // 第一个的表格
        totalAmount: [], // 最后一个表格
        loading: false
      };
    },
    components: { dictSelect },
    mounted() {
      this.getQuery()
      this.getBg()
      getByHq().then(res => {
        if (res.data.length > 0) {
          this.proportionList = res.data
        }
      })
      if (this.listQuery.year !== '' || this.listQuery.bu.length > 0) {
        this.getData()
      }
    },
    methods: {
      getQuery() {
        const buWorksListQuery = window.sessionStorage.getItem('buWorksListQuery');
        if (buWorksListQuery) {
          this.listQuery = JSON.parse(buWorksListQuery);
        }
      },
      getData() {
        this.list = []
        this.loading = true
        buWorkcheck(this.listQuery).then(res => {
          if (res.status === 201) {
            this.$message.error(res.message);
            this.loading = false
          } else {
            Object.keys(res.data).forEach(row => {
              if (row !== 'totalAmount' && row !== 'total') {
                res.data[row][0].label = row
                this.list.push(res.data[row])
                console.log(this.list)
              }
            })
            this.totalList = res.data.total;
            this.totalAmount = res.data.totalAmount;
            this.loading = false
          }
        })
      },
      reset() {
        this.listQuery = {
          page: 1,
          limit: 10,
          year: '',
          bu: [],
          country: '',
          bg: []
        }
      },
      exportExcel() {
        let str = ''; // 传参数
        for (const i in this.listQuery) {
          if (this.listQuery[i]) {
            str += i + '=' + this.listQuery[i] + '&';
          }
        }

        if (this.$store.getters.info && this.$store.getters.info.id) {
          str = str + 'userId=' + this.$store.getters.info.id;
        }

        const a = document.createElement('a');
        const href = '/api/admin/excel/exportBuWorkCheck?' + str;
        a.download = Date.now();
        a.href = href;
        a.click();
      },
      setBg(country) {
        this.listQuery.bu = []
        this.listQuery.bg = []
        if (country) {
          getDeptByBuAndCountry({ country, bg: this.listQuery.bg, bu: this.listQuery.bu }).then(res => {
            this.bgList = res.data.bgList
            this.buList = res.data.buList
          })
        } else {
          this.getBg()
        }
      },
      getBg() {
        getDeptByBuAndCountry({ country: '', bg: [], bu: [] }).then(res => {
          if (res) {
            this.buList = res.data.buList
            this.bgList = res.data.bgList
          }
        })
      },
      changeBg(row) {
        if (row.length === 0) {
          this.listQuery.bg = []
        }
        getDeptByBuAndCountry({ country: this.listQuery.country, bg: row, bu: [] }).then(res => {
          this.buList = res.data.buList
        })
      },
      changeBu(row) {
        if (row.length === 0) {
          this.listQuery.bg = []
        }
        getDeptByBuAndCountry({ country: this.listQuery.country, bg: this.listQuery.bg, bu: [] }).then(res => {
          this.bgList = res.data.bgList
        })
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('buWorksListQuery', JSON.stringify(this.listQuery))
    }
  };
</script>
<style scoped>
</style>
